<template>
  <el-row :gutter="20" class="user mt30">
    <el-col :span="7" :xs="24">
      <UserCard />
    </el-col>
    <el-col :span="17" :xs="24">
      <el-tabs v-model="activeTab" class="user-tabs">
        <el-tab-pane label="帐户安全" name="account" lazy>
          <Account />
        </el-tab-pane>
        <el-tab-pane label="基础信息" name="information" lazy>
          <Information />
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>
</template>
<script>
// 导入所有组件
const allComponents = require.context('./components', true, /\.vue$/)
let res_components = {}
allComponents.keys().forEach(fileName => {
  const comp = allComponents(fileName)
  const component_name = fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
  res_components[component_name.replace(component_name[0], component_name[0].toUpperCase())] = comp.default
})
// console.log(res_components, 'res_components')
export default {
  components: res_components,
  data() {
    return {
      activeTab: 'account'
    }
  }
}
</script>
<style lang="scss" scoped>
.user-tabs{
  background-color: #fff;
  border-radius: 10px;
  padding: 10px 20px;
}
</style>
